<template>
    <view class="device-box" v-if="equipment">
        <view class="device-box-top">
            <view class="device-box-top-title">{{equipment.name}}</view>
            <view class="device-box-top-status" v-if="equipment.status === 1 && equipment.is_warning === 0"
                style="background: #00aaff;box-shadow: 0 0 5px 5px rgba(0, 170, 255, 0.6);"></view>
            <view class="device-box-top-status" v-if="equipment.status === 1 && equipment.is_warning === 1"
                style="background: #FF0000;box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.6);"></view>
            <view class="device-box-top-status" v-if="equipment.status === 3"
                style="background: #ffc107;box-shadow: 0 0 5px 5px rgba(255, 193, 7, 0.6);"></view>
        </view>
        <view class="device-box-middle">
            <view v-for="(item1,index1) in equipment.list" :key="index1">
                <view class="device-box-middle-content" v-if="index1 < 4">
                    <view class="device-box-middle-title" v-if="equipment.status == 1 && item1.alarm == 1"
                        style="color:#ff0000">
                        {{item1.key}}
                    </view>
                    <view class="device-box-middle-title" v-if="equipment.status == 3" style="color:#ffc107">
                        {{item1.key}}
                    </view>
                    <view class="device-box-middle-title" v-if="equipment.status == 1 && item1.alarm == 0"
                        style="color:#fff">
                        {{item1.key}}
                    </view>
                    <view class="device-box-middle-num" v-if="equipment.status == 1 && item1.alarm == 1"
                        style="color:#ff0000">
                        {{item1.value}}
                    </view>
                    <view class="device-box-middle-num" v-if="equipment.status == 3" style="color:#ffc107">
                        <view style="font-size: 16px;background: rgba(255, 193, 7, 0.2);color: #ffc107;">
                            通讯中断
                        </view>
                    </view>
                    <view class="device-box-middle-num" v-if="equipment.status == 1 && item1.alarm == 0"
                        style="color:#fff">
                        {{item1.value}}
                    </view>
                </view>
            </view>
        </view>
        <view class="device-box-bottom">
            <view class="device-box-bottom-left">
                <image v-if="equipment.status == 1 && equipment.is_warning == 0" src="/static/images/zhengchang.png"></image>
                <image v-if="equipment.status == 1 && equipment.is_warning == 1" src="/static/images/gaojing.png"></image>
                <image v-if="equipment.status == 3" src="/static/images/lixian.png"></image>
                <view v-if="equipment.status == 1 && equipment.is_warning == 0" style="color: #00aaff">正常</view>
                <view v-if="equipment.status == 1 && equipment.is_warning == 1" style="color: #ff0000">报警</view>
                <view v-if="equipment.status == 3" style="color: #ffc107">离线</view>
            </view>
            <view class="device-box-bottom-middle" v-if="equipment.alarmTotal && equipment.alarmTotal > 0"
                @click="handleDeviceAlarmView()">
              <!--  <image src="/static/images/tips.png"></image> -->
               <!-- <span>您有{{equipment.alarmTotal}}条报警信息，去处理</span> -->
            </view>
            <view class="device-box-bottom-right">
                <view>详情</view>
                <image src="/static/images/sanyoujiantou.png" />
                </image>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        imgBaseUrlV2,
    } from "@/common/config";

    export default {
        props: {
            equipment: {
                type: Object,
                default: null,
            },
            imgBaseUrlV2: {
                default: imgBaseUrlV2,
            },
        },
        mounted() {
            console.log(this.equipment, "asdasd")
        },
        methods: {

        }
    };
</script>

<style lang="stylus" scoped>
    @import '~@/common/stylus/variable';

    .device-box {
        width: 680rpx;
        height: 280rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .device-box-top {
        width: 660rpx;
        height: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .device-box-top-title {
            width: 600rpx;
            flex-wrap: wrap;
            font-size: 24rpx;
            color: #FFF;
        }

        .device-box-top-status {
            width: 20rpx;
            height: 20rpx;
            border-radius: 100%;
            margin-top: 10rpx;
        }
    }

    .device-box-middle {
        width: 660rpx;
        height: 180px;
        display: flex;
        justify-content: space-around;
        margin-top: 40rpx;

        .device-box-middle-content {
            width: 160rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .device-box-middle-title {
                color: #FFF;
                font-size: 24rpx;
                height: 40rpx;
                text-align: center;
                line-height: 40rpx;
                flex-wrap: wrap;
            }

            .device-box-middle-num {
                color: #FF0000;
                font-size: 36rpx;
                margin-top: 40rpx;
            }
        }
    }

    .device-box-bottom {
        width: 680rpx;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .device-box-bottom-left {
            display: flex;
            align-items: center;

            image {
                width: 30rpx;
                height: 30rpx;
            }

            view {
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }

        .device-box-bottom-right {
            display: flex;
            align-items: flex-end;

            image {
                width: 24rpx;
                height: 24rpx;
                 margin-right: 4rpx;
            }

            view {
                font-size: 24rpx;
                color: #FFF;
                margin-right: 10rpx;
            }
        }

        .device-box-bottom-middle {
            display: flex;
            align-items: center;
            margin-left: -40rpx;

            image {
                width: 30rpx;
                height: 30rpx;
            }

            view {
                font-size: 24rpx;
                color: #ff0000;
                margin-left: 4rpx;
            }
        }
    }
</style>